.form-control {
    background: $white none;
    border: 1px solid $form-control-border-color;
    -webkit-appearance: none;
    -moz-appearance: none;
    color: $black;
    outline: 0;
    line-height: normal;
    font-weight: normal;
    vertical-align: middle;
    min-height: $input-height;
    @include transition(all 0.12s ease);
    @include box-shadow(none);
    border-radius: 0.125rem;
    @include placeholder($text-muted);
    @include transition(background 0.2s linear 0s);

    &:focus {
        border-color: fade-out($black, 0.9);
        background-color: $grey-light;
        outline: 0 !important;
        color: $black;
        @include box-shadow(none);
        @include placeholder($dark);
    }

    &[disabled],
    &[readonly],
    fieldset[disabled] & {
        background: mix($grey-light, #fff, 50%);
        color: fade-out($grey, .77);
    }

    select {
        -moz-appearance: none;
        text-indent: 0.01px;
        text-overflow: '';
    }

    &::file-selector-button {
        min-height: $input-height;
    }
}

.input-group {
    max-width: 600px;

    .input-group-btn {
        .btn-default {
            height: $form-height;
        }
    }
}

textarea {
	&.form-control {
		height: auto;
	}
}

select {
	&.form-control {
		height: $form-height !important;
	}
}

/**
 Icon input
 */
.input-icon {
  max-width: 600px;
  position: relative;

  .form-control:not(:last-child) {
    padding-right: 2.5rem;
  }

  .form-control:not(:first-child) {
    padding-left: 2.5rem;
  }
}

.input-icon-addon {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  color: $text-muted;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;

  &:last-child {
    left: auto;
    right: 0;
  }
}

.custom-checkbox{
  height: 35px;
  @extend .v-center;
}

.custom-control-label{
    padding-top: 0.1em;
}

.bg-dark {
  .form-control, .form-control:focus {
    border: 1px solid rgba(233, 236, 239, 0.05);
  }
}

.form-label {
    display: block;
    margin-bottom: .375rem;
    font-weight: 500;
    font-size: 0.875rem;
}

.picture-preview, .cropper-preview {
    max-width: calc(var(--cropper-width, 600) * 1px);
    max-height: calc(var(--cropper-height, 600) * 1px);
    object-fit: cover;
}

.form-control, .form-range{
    max-width: 600px;
}
